<template>
    <div class="breadcrumb-bar">
        <div class="flex">
            <template v-for="(item, idx) in list" :key="idx">
                <router-link class="mr-2" :to="item.path">{{ item.name }}</router-link>
                <span class="mr-2" v-if="idx < list.length - 1">></span>
            </template>
        </div>

    </div>
</template>
<style scoped>
.breadcrumb-bar {
    line-height: 50px;
    height: 50px;
}

.mr-2 {
    color: #22100D;
    font-weight: 500;
}

.mr-2:hover {
    color: #FF5364;
}
</style>
<script setup>
defineProps({
    list: {
        type: Array,
        default: () => [
            {
                name: '首页',
                path: '/my'
            },
            {
                name: '我的客户',
                path: '/custom'
            }
        ]
    }
})
</script>